<template>
  <div class="singer" v-loading="!singers.length">
    <index-list :data="singers" @select="selectSinger"></index-list>
    <Transition name="slide">
      <router-view v-slot="{ Component }">
        <component :is="Component" :singer="selectedSinger" />
      </router-view>
    </Transition>
  </div>
</template>

<script setup>
  import { getSingerList } from '@/service/singer'
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import IndexList from '@/components/base/index-list/index-list.vue'
  import storage from 'good-storage'
  import { SINGER_KEY } from '@/assets/js/constant'

  const singers = ref([])
  const selectedSinger = ref(null)
  const route = useRouter()

  const selectSinger = (singer) => {
    selectedSinger.value = singer
    cacheSinger(singer)
    route.push({
      path: `/singer/${singer.mid}`
    })
  }
  // 缓存singer
  const cacheSinger = (singer) => {
    storage.session.set(SINGER_KEY, singer)
  }

  onMounted(async () => {
    const result = await getSingerList()
    singers.value = result.singers
  })
</script>

<style scoped lang="scss">
  .singer {
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
  }
</style>
